<template>
    <div id="icon">
        <span class="icon" :class="iconClass" :style="iconStyle"></span>
    </div>
</template>

<script>
export default {
    name: 'icon',
    props: {
        type: {
            type: Number
        },
        size: {
            type: String
        },
        extra: {
            type: Number
        }
    },
    data() {
        return {
            classTypeMap: ['decrease', 'discount', 'special', 'invoice', 'guarantee']
        };
    },
    computed: {
        iconClass() {
            return this.classTypeMap[this.type] + '_' + this.extra;
        },
        iconStyle() {
            return {
                width: this.size,
                height: this.size,
                backgroundSize: ''+ this.size + ' '+ this.size
            };
        }
    }
}
</script>

<style lang="less" scoped>
@import "../../common/styles/mixin.less";

#icon {
    display: inline-block;
    vertical-align: top;
    .icon {
        display: inline-block;
        background-repeat: no-repeat;
        vertical-align: top;
        &.decrease_1 {
            .bg-image('../../components/icon/decrease_1');
        }
        &.discount_1 {
            .bg-image('../../components/icon/discount_1');
        }
        &.guarantee_1 {
            .bg-image('../../components/icon/guarantee_1');
        }
        &.invoice_1 {
            .bg-image('../../components/icon/invoice_1');
        }
        &.special_1 {
            .bg-image('../../components/icon/special_1');
        }
        &.decrease_2 {
            .bg-image('../../components/icon/decrease_2');
        }
        &.discount_2 {
            .bg-image('../../components/icon/discount_2');
        }
        &.guarantee_2 {
            .bg-image('../../components/icon/guarantee_2');
        }
        &.invoice_2 {
            .bg-image('../../components/icon/invoice_2');
        }
        &.special_2 {
            .bg-image('../../components/icon/special_2');
        }
        &.decrease_3 {
            .bg-image('../../components/icon/decrease_3');
        }
        &.discount_3 {
            .bg-image('../../components/icon/discount_3');
        }
        &.guarantee_3 {
            .bg-image('../../components/icon/guarantee_3');
        }
        &.invoice_3 {
            .bg-image('../../components/icon/invoice_3');
        }
        &.special_3 {
            .bg-image('../../components/icon/special_3');
        }
        &.decrease_4 {
            .bg-image('../../components/icon/decrease_4');
        }
        &.discount_4 {
            .bg-image('../../components/icon/discount_4');
        }
        &.guarantee_4 {
            .bg-image('../../components/icon/guarantee_4');
        }
        &.invoice_4 {
            .bg-image('../../components/icon/invoice_4');
        }
        &.special_4 {
            .bg-image('../../components/icon/special_4');
        }
    }
}
</style>